<template>
  <view class="com-b-component">
    <view class="title">子组件B</view>
    
    <view class="received-section">
      <text>CompA组件传进来的值：</text>
      <text class="received-value">{{ comAData }}</text>
    </view>
    
    <view class="callback-section">
      <text>回传值：</text>
      <input v-model="callbackValue" class="input-field" />
      <button @click="sendOutside" size="mini">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      comAData: '',
      callbackValue: '0595-2788888'
    }
  },
  mounted() {
    uni.$on('comAtoComB', this.handleComAData)
  },
  beforeDestroy() {
    uni.$off('comAtoComB', this.handleComAData)
  },
  methods: {
    handleComAData(data) {
      console.log('ComB收到ComA数据：', data)
      this.comAData = data
    },
    sendOutside() {
      console.log("ComB回传数据：" + this.callbackValue)
      this.$emit('callBackFun', this.callbackValue)
    }
  }
}
</script>

<style>
.com-b-component {
  margin: 20rpx 0;
  padding: 25rpx;
  border: 2rpx solid #2196F3;
  border-radius: 12rpx;
  background-color: #f3f9ff;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2196F3;
  margin-bottom: 15rpx;
}

.received-section {
  margin: 15rpx 0;
}

.received-value {
  color: #e91e63;
  font-weight: bold;
}

.callback-section {
  margin-top: 20rpx;
  padding: 15rpx;
  background-color: #fff3e0;
  border-radius: 8rpx;
}

.input-field {
  border: 1px solid #ddd;
  padding: 8rpx;
  margin: 0 10rpx;
  border-radius: 4rpx;
  width: 200rpx;
}
</style>